let path = require('path');
let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 拆分css样式的插件
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
	entry: {
		index: './src/index.js'
	},
	output: {
		filename:'bundle.js', //添加hash可以防止文件缓存，每次都会生成4位的hash串
		path: path.resolve('dist') //打包后的目录，必须是绝对路径
	}, //出口文件
	module: {
		rules: [
			{
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    // 将css用link的方式引入就不再需要style-loader了
                    use: 'css-loader',
                    publicPath: '../'    
                })
            },
            { //将less文件转成css文件
                test: /\.less$/,
                use: [{
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            minimize: true
                        }
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,    // 小于8k的图片自动转成base64格式，并且不会存在实体图片
                            outputPath: 'images/'   // 图片打包后存放的目录
                        }
                    }
                ]
            },
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader'
            }
		]
	}, //处理对应模块
	plugins: [
		new HtmlWebpackPlugin({
			//用哪个html作为模板
			//在src目录下创建一个index.html页面当做模板来用
			template: './src/index.html',
			// hash: true,//会在打包好的bundle.js后面加上hash串
		}),
		// 拆分后会把css文件放到dist目录下的css/style.css
        new ExtractTextWebpackPlugin('css/style.css'),
        // new webpack.HotModuleReplacementPlugin()
	], //对应的插件
	devServer: {
		// contentBase: './dist',
  //       hot: true,
  //       port: 3000
	}, //开发服务器配置
	mode: 'development'  //模式配置
}